/**
* @file 拼团详情
* @author 张超
* @created 2023/7/01 08:00
* @updated 2023/7/01 18:00
*/
<template>
	<view class="puzzle-detail">
		<u-navbar :border-bottom="false" title-size="35" title="抢购详情"></u-navbar>
		<!-- 商品信息 -->
		<view class="detail-inifo">
			<image :src="detail.image_text"></image>
			<view>
				<text>{{detail.title}}</text>
				<!-- <text>30人团</text> -->
				<view>
					<text>{{detail.pay_amount}}健康值</text>
					<!-- <text>100积分</text> -->
				</view>
			</view>
		</view>
		<!-- 距结束 -->
		<view class="count-down">
			<block v-if="status==1">
				<view class="down-title">
					<image src="@/static/shop/leftjt.png" mode=""></image>
					<text>距结束</text>
					<image src="@/static/shop/rightjt.png" mode=""></image>
				</view>
				<uni-countdown :day="days" :hour="hours" :minute="minutes" :second="0" color="#FFFFFF"
					background-color="#FB421A" />
				<view class="down-drs">
					<text>30</text>
					<text>人成团，还差</text>
					<text>{{detail.need_text}}</text>
					<text>人即可开奖</text>
				</view>
			</block>
			<!-- 拼团失败start -->
			<block v-if="status==3">
				<view class="down-cry">
					<image src="@/static/shop/cry.png"></image>
					<text>抢购失败！</text>
				</view>
				<view class="down-cry1">很遗憾没有中奖，预付款将原路返回，另外奖励您<span>{{waic.defeatDown}}-{{waic.defeatUp}}</span>元健康值请查收！</view>
			</block>
			<!-- 拼团失败end -->
			<!-- 拼团成功start -->
			<block v-if="status==4">
				<view class="down-cry" style="color:#09BB07">
					<image src="@/static/shop/surrce.png"></image>
					<text>抢购成功！</text>
				</view>
				<view class="down-cry1">商家正在努力发货，请耐心等待！</view>
			</block>
			<!-- 拼团成功end -->

			<view class="down-img">
				<view class="down-toux wew" :class="{'down-toux1':0==index1}" v-for="(item1,index1) in firstList"
					:key="index1">
					<image class="img1" :src="item1" mode="">
					</image>
				</view>
				<view class="down-shenl">...</view>
				<view v-if="length>4" class="down-toux" v-for="(item2,index2) in secondList" :key="index2+'q'">
					<image class="img1" :src="item2" mode="">
					</image>
				</view>
			</view>
			<view class="down-btn1" v-if="status=='未参团'&&invite==0" @click="gocanq">立即抢购</view>
			<view v-if="status==1&&invite==1" class="down-btn1" @click="gofenx">邀请好友抢购</view>
			<view class="down-btn1" @click="gofat" v-if="status==3">再次抢购</view>
			<view class="down-btn2" @click="goPint">查看我的抢购</view>
			<!-- <view class="down-btn2" @click="gowuliu" v-if="status==2">查看物流</view> -->
		</view>
		<!-- 拼团玩法 -->
		<view class="flow">
			<view class="flow-title">
				<text></text>
				<text>抢购玩法</text>
				<text></text>
			</view>
			<view class="flow-con">
				<view>
					<view class="">1</view>
					<view class="">2</view>
					<view class="">3</view>
					<view class="">4</view>
				</view>
				<view class="cont-bg" v-if="status==0" style="width:0%"></view>
				<view class="cont-bg" v-if="status==1" style="width:30%"></view>
				<view class="cont-bg" v-if="status==3" style="width:60%"></view>
				<view class="cont-bg" v-if="status==4" style="width:90%"></view>
				<view class="cont-text">
					<view class="">选择商品完成下单</view>
					<view class="">支付</view>
					<view class="">抢购失败全额退款</view>
					<view class="">幸运开奖成功发货</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="30" width="580rpx" height="300px">
			<view class="pop-fsd">
				<image :src="detail.share_code"></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		passDetail
	} from "@/network/api.js"
	export default {
		data() {
			return {
				// 0未参团,1已参团
				invite: '',
				id: '',
				detail: {},
				// 状态:0=待付款,1=拼团中,2=拼团成功,3=未中奖,4=已中奖
				status: '',
				// 判断是否显示第二行拼团成员
				length: 0,
				// 第一行拼团成员列表
				firstList: [],
				// 第二行拼团成员列表
				secondList: [],
				// 天
				days: '',
				// 小时
				hours: '',
				// 分钟
				minutes: '',
				// 秒
				seconds: '',
				// 邀请二维码
				show: false,
				// 判断返回,避免跳转详情页死循环，1商品详情跳转而来，2我的拼团跳转而来
				fanhtype:'',
				waic:{}
			}
		},
		onLoad(options) {
			console.log(options.data,'传参数')
			if(options.data){
				let data=JSON.parse(options.data)
				this.fanhtype=data.fanhtype
				this.id=data.id
				this.passDetailRe()
			}
			
		},
		methods: {
			// 开团
			gofat() {
				let data = {
					type: 1,
					number: 1,
					market: this.detail
				}
				uni.navigateTo({
					url: '/pages/subpackage/shop/qconfig?data=' + JSON.stringify(data)
				})
			},
			// 获取拼团详情数据
			passDetailRe() {
				let data = {
					id: this.id
				}
				passDetail(data).then(res => {
					this.waic=res.data
					this.invite = res.data.is_add
					this.detail = res.data[0]
					this.firstList = this.detail.images_text.slice(0, 4) //第一行拼团成员
					this.secondList = this.detail.images_text.slice(4, 8) //第二行拼团成员
					this.status = res.data.status
					this.length = this.detail.images_text.length
					// 当前时间戳
					let startime = new Date().getTime()
					// 结束时间戳
					let endtime = res.data[0].endtime * 1000
					this.time = this.calculateTimeDifference(startime, endtime)
					this.days = this.time.days
					this.hours = this.time.hours
					this.minutes = this.time.minutes
					this.seconds = this.time.seconds
					// console.log(this.time,'时间')
				})
			},
			// 时间戳转换为时间
			calculateTimeDifference(timestamp1, timestamp2) {
				const difference = Math.abs(timestamp1 - timestamp2);
				const days = Math.floor(difference / (24 * 60 * 60 * 1000));
				const hours = Math.floor((difference % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
				const minutes = Math.floor((difference % (60 * 60 * 1000)) / (60 * 1000));
				const seconds = Math.floor((difference % (60 * 1000)) / 1000);

				return {
					days,
					hours,
					minutes,
					seconds
				};
			},
			gofenx() {
				this.show = !this.show
				// uni.showToast({
				// 	title: "待改为扫码分享",
				// 	icon: "none",
				// 	duration: 2000,
				// });
			},
			// 立即参团
			gocanq() {
				let data = {
					type: 2,
					number: 1,
					market: this.detail
				}
				uni.navigateTo({
					url: '/pages/subpackage/shop/qconfig?data=' + JSON.stringify(data)
				})
			},
			// 跳转到物流
			gowuliu() {
				uni.showToast({
					title: "待对接物流",
					icon: "none",
					duration: 2000,
				});
			},
			// 查看我的拼团
			goPint() {
				if(this.fanhtype==1){
					uni.navigateTo({
						url: '/pages/subpackage/shop/wopt'
					})
				}else{
					// 避免重复跳转死循环
					uni.navigateBack({
					  delta: 1
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	.puzzle-detail {
		height: 100vh;
		padding: 20rpx 30rpx;
		background-color: #f3f3f3;

		// 商品信息
		.detail-inifo {
			display: flex;
			height: 240rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;

			>image {
				width: 192rpx;
				height: 192rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;
			}

			>view:nth-child(2) {
				>text:nth-child(1) {
					display: block;
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Medium;
				}

				>text:nth-child(2) {
					display: block;
					width: 140rpx;
					height: 40rpx;
					margin: 30rpx 0 30rpx 0;
					padding: 0rpx 14rpx;
					font-size: 30rpx;
					border-radius: 10rpx;
					background-color: #FFCB80;
				}

				>view:nth-child(3) {
					>text:nth-child(1) {
						margin-right: 20rpx;
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #ff0000;
					}

					>text:nth-child(2) {
						font-size: 30rpx;
						text-decoration: line-through;
						font-family: PingFang SC, PingFang SC-Medium;
						color: #999999;
					}
				}
			}
		}

		// 距结束
		.count-down {
			// height: 866rpx;
			margin-top: 20rpx;
			padding: 48rpx 30rpx 64rpx 30rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.down-title {
				display: flex;
				justify-content: center;
				align-items: center;

				>image {
					width: 40rpx;
					height: 8rpx;
				}

				>text {
					margin: 0 20rpx;
					font-size: 36rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					color: #fc411a;
				}
			}

			// 拼团失败start
			.down-cry {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				color: #999999;

				>image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
				}
			}

			.down-cry1 {
				text-align: center;
				margin: 15rpx auto;
				width: 428rpx;
				font-size: 24rpx;
				color: #999999;
			}

			// 拼团失败end

			.uni-countdown {
				margin: 30rpx 0;
				justify-content: center;
			}

			.down-drs {
				display: flex;
				justify-content: center;
				font-size: 36rpx;
				align-items: center;

				>text:nth-child(odd) {
					color: #fc411a;
				}
			}

			.down-img {
				display: flex;
				flex-wrap: wrap;
				margin: 60rpx 0 80rpx 0;

				.down-toux {
					position: relative;
					margin-right: 32rpx;

					>image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
				}

				.down-toux1:before {
					content: "团长";
					position: absolute;
					left: 20rpx;
					top: 85rpx;
					bottom: 30rpx;
					z-index: 999 !important;
					text-align: center;
					width: 60rpx;
					height: 26rpx;
					line-height: 26rpx;
					font-size: 20rpx;
					color: #fff;
					border-radius: 30rpx;
					background-color: #E87011;
					display: block;
				}

				.wew {
					margin-bottom: 30rpx;
				}

				.down-toux:nth-child(5) {
					margin-right: 0
				}

				.down-toux:nth-child(10) {
					margin-right: 0
				}

				.down-shenl {
					width: 100rpx;
					height: 100rpx;
					text-align: center;
					font-size: 50rpx;
					margin-right: 32rpx;
					border-radius: 50%;
					background-color: #F2F2F2;
				}
			}

			.down-btn1 {
				width: 630rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 36rpx;
				color: #fff;
				border-radius: 60rpx;
				background: linear-gradient(to right, #FD8F51, #FD3A09);
			}

			.down-btn1:active {
				color: #fff;
				background: linear-gradient(to right, #FD8F51, #FD8F51);
			}

			.down-btn2 {
				width: 630rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				font-size: 36rpx;
				margin-top: 30rpx;
				color: #FD3D0C;
				border-radius: 60rpx;
				background-color: #fff;
				border: 1rpx solid #FD8F51;
			}

			.down-btn2:active {
				color: #000
			}
		}

		// 拼团玩法
		.flow {
			margin: 20rpx 0 40rpx 0;
			padding: 60rpx 46rpx;
			border-radius: 10rpx;
			background-color: #fff;

			.flow-title {
				display: flex;
				align-items: center;

				>text:nth-child(odd) {
					display: block;
					width: 184rpx;
					height: 0.5rpx;
					background-color: #F3F3F3;
				}

				>text:nth-child(2) {
					margin: 0 30rpx;
					font-size: 30rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					color: #fd3d0c;
				}
			}

			.flow-con {
				position: relative;

				>view:nth-child(1) {
					z-index: 2;
					display: flex;
					justify-content: space-between;
					height: 18rpx;
					margin: 30rpx;
					background-color: #F6F6F6;
					border-radius: 60rpx;

					>view {
						z-index: 3;
						width: 24rpx;
						height: 24rpx;
						text-align: center;
						line-height: 24rpx;
						font-size: 20rpx;
						margin-top: -3rpx;
						border-radius: 50%;
						color: #fff;
						background-color: red;
					}
				}

				.cont-bg {
					position: absolute;
					top: 0;
					z-index: 1;
					height: 18rpx;
					margin: 0 30rpx;
					border-radius: 60rpx;
					background: linear-gradient(to right, #FD8F51, #FD3A09);
				}

				.cont-text {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999999;

					>view {
						width: 100rpx;
						// border:1rpx solid red;
					}
				}
			}
		}

		.pop-fsd {
			display: flex;
			justify-content: center;
			height:100%;
			background-image: url('../../../static/shop/yaoqbg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			
			>image{
				margin-top:24%;
				width:200rpx;
				height:200rpx;
				
			}
		}
		
		.u-mode-center-box {
			background-color: transparent !important;
		}
	}
</style>